<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Art Info</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-primary">
                <h3 id="today" class="text-center" onclick="showToday()">今日展出</h3>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <h3 id="thisweek" class="text-center text-muted" onclick="showThisWeek(this)">本周展出</h3>
            </div>
        </div>
        <div style="height:10px;"></div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right">
                <span class="badge" style="font-size:16px;">共<span id="total">-</span>个展览</span>
                <strong style="font-size:18px;vertical-align:middle;">南京</strong>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <strong style="font-size:18px;vertical-align:middle;">江苏省美术馆</strong>
            </div>
        </div>
        <div style="height:10px;"></div>
        <div class="row">
            <div id="info-cards" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <!-- <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="pull-left" style="min-width:110px;min-height:110px;max-width:180px;max-height:110px;margin-right:15px;">
                            <img class="img-responsive" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4211245011,1440872953&fm=26&gp=0.jpg" alt="">
                        </div>
                        <div>
                            <p><strong>杨耀宁中国画展</strong></p>
                            <p><i class="glyphicon glyphicon-align-left" style="margin-right:5px;"></i>结束时间：12月26日<span class="badge">5天</span></p>
                            <p><i class="glyphicon glyphicon-leaf" style="margin-right:5px;"></i>江苏省美术馆新馆</p>
                            <p>简介……………………</p>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</body>
<template id="card-tpl">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="pull-left" style="min-width:110px;min-height:110px;max-width:150px;max-height:110px;margin-right:15px;">
                <img class="img-responsive" src="#img#">
            </div>
            <div>
                <p><strong>#nname#</strong></p>
                <p><i class="glyphicon glyphicon-align-left" style="margin-right:5px;"></i>结束时间：#end_time#<span class="badge">#count_down#天</span></p>
                <p><i class="glyphicon glyphicon-leaf" style="margin-right:5px;"></i>#org#</p>
                <p>#ddesc#</p>
            </div>
        </div>
    </div>
</template>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    query();
    function showToday(){
        var thisid = '#today';
        var anotherid = '#thisweek';
        if(!$(thisid).parent().hasClass('bg-primary')){
            $(thisid).parent().addClass('bg-primary');
        }
        if($(thisid).hasClass('text-muted')){
            $(thisid).removeClass('text-muted');
        }
        $(anotherid).addClass('text-muted');
        $(anotherid).parent().removeClass('bg-primary');
        //
        query();
    }

    function showThisWeek(){
        var thisid = '#thisweek';
        var anotherid = '#today';
        if(!$(thisid).parent().hasClass('bg-primary')){
            $(thisid).parent().addClass('bg-primary');
        }
        if($(thisid).hasClass('text-muted')){
            $(thisid).removeClass('text-muted');
        }
        $(anotherid).addClass('text-muted');
        $(anotherid).parent().removeClass('bg-primary');
        //
        query();
    }

    function query(){
        // var data = [
        //     {'img':'images/0.jpg','name':'杨耀宁中国画展','enddate':'2018-12-25','org':'江苏省美术馆新馆','note':'简介……………………'},
        //     {'img':'images/0.jpg','name':'杨耀宁中国画展','enddate':'2018-12-25','org':'江苏省美术馆新馆','note':'简介……………………'},
        //     {'img':'images/0.jpg','name':'杨耀宁中国画展','enddate':'2018-12-25','org':'江苏省美术馆新馆','note':'简介……………………'},
        //     {'img':'images/0.jpg','name':'杨耀宁中国画展','enddate':'2018-12-25','org':'江苏省美术馆新馆','note':'简介……………………'},
        //     {'img':'images/0.jpg','name':'杨耀宁中国画展','enddate':'2018-12-25','org':'江苏省美术馆新馆','note':'简介……………………'},
        // ];
        var data;
        $.ajax({
            type:'GET',
            async:false,
            url:'data/artinfo',
            dataType:'json',
            success:function(r){
                data = r;
            }
        });

        for(var i=0;i<data.length;i++){
            var item = data[i];
            var now = new Date();
            var count_down = Math.round((new Date(item.end_time) - now)/(24*3600*1000));
            data[i].count_down = count_down;
        }
        $('#total').html(data.length);
        var tplhtml = $('#card-tpl').html();
        $('#info-cards').empty();
        for(var i=0;i<data.length;i++){
            var item = data[i];
            var card_html = tplhtml;
            for(var key in item){
            card_html = card_html.replace('#'+key+'#',item[key]);
            }
            $('#info-cards').append(card_html);
        }
    }
</script>
</html>